<div class="col-md-12">
  <!-- control toolbar -->
  <div class="row">
    <div class="col-md-9">
      <ui-select
        theme="select2" class="form-control"
        style="width: 320px; margin-bottom: 20px"
        ng-model="names.selected" search-enabled="false">
        <ui-select-match>{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="name in names.available">
          <small
            style="text-transform: uppercase"
            ng-class="{'bold':$select.selected === name}"
            ng-bind="types(name)"></small>
          <div
            style="padding-left: 8px"
            ng-class="{'bold':$select.selected === name}"
            ng-bind="name|highlight:$select.search"></div>
        </ui-select-choices>
      </ui-select>
    </div>
    <div class="col-md-3 hidden-sm hidden-xs pull-right">
      <searchbox ng-model="search" placeholder="Search Anything"></searchbox>
    </div>
  </div>
  <!-- end of control toolbar -->
</div>

<div class="col-md-12">
  <ng-switch on="metricsGroup">
    <!-- meter -->
    <sortable-table
      ng-switch-when="meter"
      search-bind="search"
      columns-bind="meterMetricsTable.cols"
      records-bind="meterMetricsTable.rows"
      pagination="10">
    </sortable-table>
    <!-- histogram -->
    <sortable-table
      ng-switch-when="histogram"
      search-bind="search"
      columns-bind="histogramMetricsTable.cols"
      records-bind="histogramMetricsTable.rows"
      pagination="10">
    </sortable-table>
  </ng-switch>
</div>